<template>
    <div class="con">
        <ul>
            <li :class="{active:show1}" @click="tab(1)">
                还款中
                <span v-if="count.repayingCount!==0">({{count.repayingCount}})</span>
            </li>
            <li :class="{active:show2}" @click="tab(3)">
                还款失败
                <span v-if="count.failCount!==0">({{count.failCount}})</span>
            </li>
            <li :class="{active:show3}" @click="tab(2)">还款成功</li>
        </ul>

        <div
            class="card"
            v-for="(item,index) in data"
            :key="index"
            @click="orderDetail(item.repayOrderNo)"
        >
            <div class="title" :style="{background:color}">
                <p>
                    <img :src="item.logoUrl" alt class="icon">
                    {{item.bankName}}({{item.cardNo}})
                    <span>
                        查看详情
                        <img src="../../assets/images/more3.png" alt class="more">
                    </span>
                </p>
            </div>
            <div class="info">
                <div class="content">
                    <p>还款金额</p>
                    <span>
                        ¥ {{item.amount}}
                        <i>({{item.totalCount}}笔)</i>
                    </span>
                </div>
                <div class="content">
                    <p>已还</p>
                    <span>
                        ¥{{item.completeAmount}}
                        <i>({{item.tradeCount}}笔)</i>
                    </span>
                </div>
                <div class="content">
                    <p>已还手续费</p>
                    <span>¥ {{item.completeFee}}</span>
                </div>
                <div class="content tip">
                    <p>订单号: {{item.repayOrderNo}}</p>
                    <span>{{item.createTime}}</span>
                </div>
            </div>
        </div>

        <van-pagination
            v-model="currentPage"
            :total-items="total"
            style="margin-top:20px"
            @change="change"
            v-if="this.data.length!=0"
        />
    </div>
</template>

<script>
export default {
    name: "mybackplan",
    data() {
        return {
            total: 0,
            currentPage: 1,
            timestamp: "",
            data: {},
            show1: true,
            show2: false,
            show3: false,
            color: "#ffae4e",
            key: 1,
            pageNum: 1,
            count: {}
        };
    },
    methods: {
        orderDetail(repayOrderNo) {
            this.$router.push({
                name: "backorderdetail",
                params: {
                    repayOrderNo: repayOrderNo
                }
            });
        },
        tab(key) {
            this.key = key;
            switch (key) {
                case 1:
                    this.show1 = true;
                    this.show2 = false;
                    this.show3 = false;
                    this.color = "#ffae4e";
                    localStorage.setItem("tabKey", key);

                    this.select(key);
                    break;
                case 3:
                    this.show2 = true;
                    this.show1 = false;
                    this.show3 = false;
                    this.color = "#A6A9B5";
                    localStorage.setItem("tabKey", key);

                    this.select(key);
                    this.getOrderCount();

                    break;
                case 2:
                    this.show3 = true;
                    this.show1 = false;
                    this.show2 = false;
                    this.color = "#21D39A";
                    localStorage.setItem("tabKey", key);

                    this.select(key);
                    break;
            }
        },
        // 分页
        change(page) {
            this.pageNum = page;
            this.select(this.key);
        },
        select(key) {
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/repay/getOrderByStatus?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    status: key,
                    pageNum: this.pageNum
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.data = response.data.data.data;
                        this.total = response.data.data.totalCount;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        },
        getOrderCount() {
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/repay/getOrderCount?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId")
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.count = response.data.data;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.select(1);
        this.getOrderCount();
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}

ul {
    width: 100%;
    height: 44px;
}
ul li {
    width: 33%;
    float: left;
    text-align: center;
    line-height: 44px;
}
.active {
    color: #ffae4e;
    /* border-bottom: 2px solid #ffae4e; */
}
.card {
    width: 94%;
    height: 190px;
    margin-left: 3%;
    border-radius: 5px;
    margin-top: 24px;
    box-shadow: 0px 2px 4px 0px #f1f1f1;
    background: #fff;
}
.card .title {
    height: 44px;
    background: #ffae4e;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    line-height: 44px;
    color: #fff;
    position: relative;
}
.card .title .icon {
    width: 18px;
    margin-left: 15px;
    margin-top: 13px;
    margin-right: 13px;
}
.card .title span {
    position: absolute;
    top: 0px;
    right: 10px;
    font-weight: 200;
}
.card .title .more {
    width: 6px;
    margin-left: 5px;
    margin-top: 13px;
}
.info {
    width: 100%;
    background: #fff;
}
.info .content {
    width: 90%;
    margin-left: 5%;
    position: relative;
    height: 36px;
}

.info .content p {
    line-height: 36px;
    color: #a6a9b5;
    font-size: 12px;
}
.info .content span {
    position: absolute;
    right: 0px;
    top: 8px;
    font-size: 16px;
}
.info .tip {
    border-top: 1px solid #ececec;
    color: #a6a9b5;
    font-size: 12px;
}
.info .tip span {
    font-size: 12px;
}
i {
    font-size: 12px;
    color: #2d3659;
    font-weight: 200px;
    font-style: normal;
}
</style>
